<template>
   <div>
        <home-header ></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-icons :list="iconList"></home-icons>
        <home-recommend :list="recommendList"></home-recommend>
        <home-weekend :list="weekendList"></home-weekend>
   </div>
  
</template>
<script>
    import HomeHeader from './components/Header.vue'
    import HomeSwiper from './components/Swiper.vue'
    import HomeIcons from './components/Icons.vue'
    import HomeRecommend from './components/Recommend.vue'
    import HomeWeekend from './components/Weekend.vue'
    import axios from 'axios'
    import {
        mapState
    } from 'vuex'
    export default {
        name: 'Home',
        data() {
            return {
                swiperList: [],
                iconList: [],
                recommendList: [],
                weekendList: [],
                lastCity: ''
            }
        },
        components: {
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeRecommend,
            HomeWeekend
        },
        computed: {
            ...mapState(['city'])
        },
        methods: {
            getHomeInfo() {
                const that = this;
                axios.get('/api/index.json?city=' + this.city)
                    .then(that.getHomeInfoSucc)
            },
            getHomeInfoSucc(res) {
                res = res.data;
                if (res.ret && res.data) {
                    this.swiperList = res.data.swiperList;
                    this.iconList = res.data.iconList;
                    this.recommendList = res.data.recommendList;
                    this.weekendList = res.data.weekendList;
                }
            }
        },
        mounted() {
            this.lastCity = this.city;
            this.getHomeInfo();
        },
        activated() {
            if (this.lastCity !== this.city) {
                this.lastCity = this.city;
                this.getHomeInfo();
            }
        },
    }
</script>
<style lang="sass" scoped>

</style>